/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  View,
  Text,
  Image,
  Button,
  TextInput,
  ActivityIndicator
} from 'react-native';
import MyText from './src/view/MyText'
import DraggableView from './src/example/DraggableView'
import PullViewExample from './src/example/PullViewExample'

var PanResponderExample = require('./src/example/PanResponderExample');

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {text: '---', showActivityIndicator: true};
  }

  static alert_123() {
    alert('123');
    App.test();
  }

  static test() {
    var src;

    src = require('./img/icon_logo.png');
    console.log('AAA-require', src); // 1

    src = require('./img/num_1.png');
    console.log('AAA-require', src); // 2
    src = require('./img/num_2.png');
    console.log('AAA-require', src); // 3
    src = require('./img/num_3.png');
    console.log('AAA-require', src); // 4

  }

  render() {
    // return this.render1();
    // return this.render2();
    return this.render3();
  }

  render1() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}
          onPress={()=>{console.log("AAA");}}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
        <Image style={{ width: 30, height: 30 }}
          source={require('./img/icon_logo.png')} />
        {/* 经测试，本地SD卡中的图片，可以用 uri 的方式加载 */}
        <Image style={{ width: 100, height: 100 }}
          source={{ uri: 'file:///sdcard/1.png' }} />
        <Button
          title="OK" 
          // onPress={ () => alert('OKKK') }
          // onPress={ () => this.alert_123() }
          onPress={ () => App.alert_123() }
          // FIXME --- 不生效
          // style={{width: 300, height: 300}}
          /> 
      </View>
    );
  }

  render2() {
    return <PanResponderExample />;
    // return <DraggableView />;
  }

  render3() {
    return <PullViewExample />;
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
